<template>
  <div>
    
    <div class="JS_container relative">
      <Tabs v-model="tag" @on-click="selectTab">
        <TabPane label="基本信息"  name="1" icon="ios-bookmark">
          <div class="tag1">
            <h5 class="ui">基本信息:</h5>
            <ul>
              <li class="patent-info-element">
                <span class="patent-info-column">专利标题：</span>
                <span>{{basic.patent_name}}</span>
              </li>
               <!-- <li class="patent-info-element">
                 <span class="patent-info-column">专利标题（英）：</span>
                 <span>Protection cover special for Huawei honour 7</span>
               </li> -->
              <li class="patent-info-element">
                <span class="patent-info-column">申请号：</span>
                <span class="patent-info-number">{{basic.patent_apply_number}}</span>
                <span class="patent-info-column">申请日：</span>
                <span class="patent-info-number">{{basic.patent_apply_day}}</span>
              </li>
              <li class="patent-info-element">
                <span class="patent-info-column">公开(公告)号：</span>
                <span class="patent-info-number">{{basic.public_notice_number}}</span>
                <span class="patent-info-column">公开(公告)日：</span>
                <span class="patent-info-number">{{basic.public_notice_day}}</span>
              </li>
              <li class="patent-info-element">
                <span class="patent-info-column">发明人：</span>
                <span v-for=" (name, index) in basic.patent_inventor && basic.patent_inventor.split(',')" :key="index">
                  <span class="" v-show="index !=0">，</span>
                  <span class="">{{name}}</span>
                </span>
              </li>
              <li class="patent-info-element">
                <span class="patent-info-column">申请人：</span>
                <span class="">
                  <span class="-highlight-target-text">{{basic.patent_applicant}}</span>
                </span>
              </li>
              <li class="patent-info-element">
                <span class="patent-info-column">申请人地址：</span>
                <span>{{basic.address}}</span>
              </li>
              <li class="patent-info-element" v-show="basic.patent_agency">
                <span class="patent-info-column">代理机构：</span>
                <span>{{basic.patent_agency}}</span>
              </li>
              <li class="patent-info-element" v-show="basic.agent">
                <span class="patent-info-column">代理人：</span>
                <span>{{basic.agent}}</span>
              </li>
              <li class="patent-info-element">
                <span class="patent-info-column">主分类号：</span>
                <span class=" ipc" data-ds="cn">{{basic.main_class_number}}</span>
              </li>
              <li class="patent-info-element">
                <span class="patent-info-column">IPC分类号：</span>
                <span class=" ipc" data-ds="cn">{{basic.class_number}}</span>
              </li>
            </ul>
            <div class="description">
                <span>摘要：</span>
              <div style="line-height: 1.9285em; padding: 0 22px;" class="CN106487957A-summary" data-content="CN106487957A-translate-summary" v-html="basic.abstract"></div>
  <!--              <span>摘要（英）：</span>-->
  <!--              <div>-->
  <!--                <p style="line-height: 1.9285em;padding: 0 25px;">e is ensured; and thus, fingers are put in the space, so that the bearing piece can be easily taken down from the back cover.</p>-->
  <!--              </div>-->
            </div>
            <div class="grid" v-show="basic.instructions_f_img">
              <h5 class="ui">专利附图:</h5>
              <div class="ui wide clearfix">
                <div class="ui column" v-for="(image, index) in basic.instructions_f_img && basic.instructions_f_img" :key="index">
                  <img :src="image">
                  <div style="margin-top: 10px;">图{{index+1}}</div>
                </div>
              </div>
            </div>
            <div class="small">
              <img :src="basic.abstract_f_img" @error="$app.defImag" >
            </div>
          </div>

        </TabPane>
        <TabPane label="权利要求书" name="2" icon="md-book">
          <div class="tag2" v-html="claims"></div>
        </TabPane>
        <TabPane label="说明书全文" name="3" icon="ios-book-outline">
          <div class="tag3" v-html="description"></div>
        </TabPane>

      </Tabs>
    </div>
    
    
  </div>
</template>

<script>



export default {
  name: 'pTnfoCom',
  components: {},
  props: ["query"],


  data () {

    return {
      /*****
       * 选项卡
       * 1基本信息
       * 2权利要求书
       * 3说明书全文
       *****/ 
      tag:'', 

      table_name:'', // 列表名
      id:'', // 专利id

      patent_no:'',//专利号

      // 下面的是基础信息
      basic:'', // 基本信息
      claims:'', // 权利要求
      description:'', // 说明书
      pdf:'' // pdf
    }
  },
  computed:{

  },
  // 挂载
  mounted(){
    let {
      //组1
      table_name,
      id,

      //组2
      patent_no,

      type,
    }=JSON.parse(this.query);


    this.tag=type.toString();// 选项卡
    this.table_name=table_name;// 列表名
    this.id=id;// 专利id
    this.patent_no=patent_no;//专利号


    this.getBasicInfo();
    this.getClaimsInfo();
    this.getDescriptionInfo();
  },
  watch:{
    tag(newVal,oldVal){
      
      // 替换地址栏
      let{
        $route:{
          name,
          query:{
            type,
            ...params
          }
        }
      }=this;

      //刷新地址栏
      $app.tagNavReplace({
        name,
        query:Object.assign(params,{
          type:newVal
        })
      });
    }
  },
  // 绑定方法
  methods: {
    // 切换选项卡
    selectTab (tag) {
      // console.log('tag = ',tag);
    },
    // 基本信息
    getBasicInfo(){
      const {table_name, id,patent_no} = this;
      let obj={table_name, id};
      if($app.judgeData(patent_no)){
        obj={patent_no};
      }
      $ajax.lb_getPatentSearchInfo(obj, res => {
        this.basic = res.data;
      })
    },
    // 权利要求
    getClaimsInfo(){
      const {table_name, id,patent_no} = this;
      let obj={table_name, id};
      if($app.judgeData(patent_no)){
        obj={patent_no};
      }
      $ajax.lb_getClaimsContent(obj, res => {
        this.claims = res.data;
      })
    },
    // 说明书
    getDescriptionInfo(){
      const {table_name, id,patent_no} = this;
      let obj={table_name, id};
      if($app.judgeData(patent_no)){
        obj={patent_no};
      }
      $ajax.lb_getInstructionContent(obj, res => {
        this.description = res.data;
      })
    }
  },

}
</script>
